<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星 空</title>
    <style>
        html,body{
            margin:0;
            padding: 0;
            height: 100%;
            overflow:hidden; 
        }
    </style>
    
</head>

<body style="background-color:#000;">
    <div>
        <canvas id="canvas">
            当前浏览器不支持canvas,请选择其他浏览器重试
        </canvas>
    </div>

    <script>
        var stars = [];
        var meteor = {};

        window.onload = function () {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            //开始canvas
            start(ctx);
        }

        function start(ctx) {
            createStars(200);
            createMeteor();
            setInterval(function () {

                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

                for (var i = 0; i < stars.length; i++) {
                    ctx.fillStyle = stars[i].color;

                    ctx.beginPath();
                    ctx.arc(stars[i].x, stars[i].y, stars[i].radius, 0, 2 * Math.PI);
                    ctx.closePath();
                    ctx.fill();
                }

                ctx.beginPath();
                ctx.moveTo(meteor.x, meteor.y);
                ctx.lineTo(meteor.x - meteor.length, meteor.y + meteor.length);
                ctx.strokeStyle = "rgba(255,255,255," + meteor.inherit + ")";
                ctx.stroke();

                updateStars();
                updateMeteor();

            }, 10);
        }

        function createStars(num) {
            for (var i = 0; i < num; i++) {
                stars[stars.length] = createStar();
            }
        }

        //创建星星
        function createStar() {
            var star = {
                x: Math.random() * window.innerWidth,
                y: Math.random() * window.innerHeight,
                radius: Math.random(),
                color: '#fff'
            }

            return star;
        }

        function updateStars() {
            for (var i = 0; i < stars.length; i++) {
                stars[i].x = stars[i].x - Math.random() * 0.03;
                stars[i].y = stars[i].y - Math.random() * Math.pow(-1, Math.round(Math.random() * 2)) * 0.02;

                if (stars[i].x < 0 || stars[i].y > window.innerHeight) {
                    stars[i] = createStar();
                    stars[i].x = 2 * stars[i].x > window.innerWidth ? window.innerWidth : 2 * stars[i].x;
                }
            }
        }

        //创建流星
        function createMeteor() {
            meteor = {
                x: window.innerWidth * Math.random(),
                y: window.innerHeight * Math.random(),
                length: 50 * Math.random(),
                inherit: Math.random(),
                vx: 5,
                vy: 2,
                g: 2
            }
        }

        function updateMeteor() {
            meteor.x = meteor.x - meteor.vx;
            meteor.y = meteor.y + meteor.vy + meteor.g;
            meteor.inherit = meteor.inherit * 0.99;

            console.log(meteor.x, meteor.y);

            if (meteor.x < 0 || meteor.y > window.innerHeight) {
                if (Math.random() * 1000 < 20) {
                    createMeteor();
                }
            }
        }
    </script>
</body>

</html>